<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>138_元素的属性和方法</title>

	</head>
	<body>
		<div id="box1">我是box1
			<span class="s1">我是span</span>
			<span class="s1">我是span</span>
		</div>
		<span class="s1">我是span</span>
		<script>
			/* 
				div元素的原型链
					HTMLDivElement -> HTMLElement -> Element -> Node...
				
				通过元素节点对象获取其他节点的方法
					element.childNodes获取当前元素的子节点。(会包含空白的子节点)
					element.children获取当前元素的子元素
					element.firstElementChild 获取当前元素的第一个子元素
					element.lastElementChild 获取当前元素的最后一个子元素
					element.firstChild //获取当前元素的最后一个子节点
					element.nextElementSibling获取当前元素的下一个兄弟元素
					element.previousElementSibling获取当前元素的前一个兄弟元素
					element.parentNode获取当前元素的父节点
					element.tagName 获取当前元素的标签名
			 */
			const box1 = document.getElementById("box1");
			/* 
				共5个节点：分别是div，“我是box1”文本节点，span，空白节点，span，空白节点共5个。
			 */
			const cns = box1.childNodes;
			let ele = box1.children; //2,这个只获取元素，不是节点，所以也就不包含文本节点了。
			ele = box1.firstChild; //我是box1
			console.log(ele);
			console.log(box1);
		</script>
	</body>
</html>